<template>
	<view class="container">
		<TopNav title="报备"></TopNav>
		<view class="tag">
			<view class="tag-item" v-for="(item,index) in tagList" :key="index" @click="handleTagChange(index)"
				:class="{'tag-active':index === tagCurrent}">
				<text>{{item.text}}</text>
			</view>
		</view>
		<view class="bg-white radius p-lr16 p-t13 p-b12 m-t10">
			<view class="">
				<text class="f-w600 f-s15 line-height22">请填写详细的报备描述</text>
			</view>
			<view class="m-t12">
				<u-textarea v-model="form.content" placeholder="请输入不小于15个字的描述" count border="none" height="250rpx"
					placeholderClass="textarea-placeholder" maxlength="100" style="color:#202020;"></u-textarea>
			</view>
		</view>
		<view class="bg-white radius p-lr16 p-t13 p-b12 m-t10">
			<view class="">
				<text class="f-w600 f-s15 line-height22">上传报备证明材料</text>
			</view>
			<view class="m-t8">
				<text class="f-s12 f-w400 text-gray line-height17">最多上传3张图片，总大小不超过50M</text>
			</view>
			<view class="m-t10">
				<UploadImage width="210rpx" height="210rpx" v-model="form.images" :limit="3">
					<view class="upload-image">
						<image src="/static/images/login/photo.png" class="width-28" mode="widthFix"></image>
						<text class="m-t8 text-gray f-s12">上传照片</text>
					</view>
				</UploadImage>
			</view>
		</view>

		<view class="flex justify-center fixed-bottom p-lr16">
			<view class="self-btn flex flex-direction full-width" hover-class="pressed" @click="handleSubmit">
				<text class="f-s16 line-height22">提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	import UploadImage from '@/components/upload-image/index.vue'
	import {
		reportList,
		reportSubmit
	} from '@/api/order/index.js'
	export default {
		components: {
			UploadImage
		},
		data() {
			return {
				form: {
					order_sn: '',
					type_id: '',
					images: '',
					content: '',
				},
				tagCurrent: 0,
				tagList: []
			};
		},
		onLoad(query) {
			this.form.order_sn = query.id
			this.getReportList()
		},
		methods: {
			handleSubmit(){
				if(this.form.content.length < 15){
					this.$toast('请填写不少于15个字的报备描述')
					return
				}
				if(this.form.images.length < 1){
					this.$toast("请上传证明材料")
					return
				}
				this.$modal.loading('正在报备').then(()=>{
					reportSubmit(this.form).then(res=>{
						this.$modal.closeLoading()
						this.$toast('已报备')
					}).catch(()=>this.$modal.closeLoading())
				})
				
			},
			getReportList() {
				reportList().then(res => {
					let {
						data
					} = res
					this.tagList = data.map(item => {
						return {
							text: item.name,
							value: item.id
						}
					})
					this.form.type_id = this.tagList[0]['value']
				})
			},
			handleTagChange(index){
				this.tagCurrent = index
				this.form.type_id = this.tagList[index]['value']
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/css/var.scss';

	page {
		@include fixed-bottom;
	}

	.container {
		padding: 20rpx 32rpx;

		.tag {
			margin: 24rpx 0;
			display: flex;
			overflow-x: auto;

			.tag-item {
				padding: 16rpx 32rpx;
				background-color: #FFFFFF;
				border-radius: 32rpx;
				font-weight: 400;
				font-size: 24rpx;
				text-align: center;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.tag-active {
				background-color: #202020;
				color: #fff;
			}
		}

		::v-deep .textarea-placeholder {
			font-weight: 400;
			font-size: 30rpx;
			color: #B2B8C1;
			line-height: 42rpx;
		}

		::v-deep .u-textarea {
			padding: 0;
			font-weight: 400;
			font-size: 30rpx;
		}

		::v-deep.uni-textarea-textarea {
			color: #202020 !important;
		}
	}
</style>